<template>
  <el-row>
    <el-col :span="6">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree
              :option="cityTreeOption"
              :data="cityTreeData"
              @node-click="cityNodeClick"
            />
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree
              :option="treeOption"
              :data="treeData"
              @node-click="nodeClick"
            />
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="12">
      <basic-container>
        <el-button-group>
          <el-button
            v-if="permission.dept_add"
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="addChildren"
            >新增</el-button
          >
          <el-button
            v-if="permission.dept_delete"
            type="primary"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete"
            >删除</el-button
          >
        </el-button-group>
      </basic-container>
      <basic-container>
        <avue-form
          ref="form"
          :option="deptOption"
          v-model="deptForm"
          @submit="handleSubmit"
        >
        </avue-form>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
import { getLazyTree as getCityLazyTree } from "@/api/system/city";
import { add, getDept, getDeptTree, remove } from "@/api/system/dept";
import { mapGetters } from "vuex";
import { validatenull } from "@/util/validate";

export default {
  data() {
    return {
      cityTopId: 0,
      cityTreeId: 0,
      cityTreeData: [],
      cityTreeOption: {
        nodeKey: "id",
        lazy: true,
        defaultExpandAll: false,
        // filter: false,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getCityLazyTree(parentId).then((res) => {
            resolve(
              res.data.data.map((item) => {
                return {
                  ...item,
                  leaf: !item.hasChildren,
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children",
        },
      },
      topId: 0,
      treeId: 0,
      treeParentId: 0,
      treeData: [],
      treeOption: {
        nodeKey: "id",
        defaultExpandAll: true,
        addBtn: false,
        menu: false,
        size: "small",
        // filter: false,
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children",
        },
      },
      deptForm: {},
      deptOption: {
        labelWidth: 100,
        column: [
          {
            label: "行政区划",
            prop: "cityId",
            span: 24,
            display: false,
            rules: [
              {
                required: true,
                message: "请选择行政区划",
                trigger: "blur",
              },
            ],
          },
          {
            label: "行政区划",
            prop: "cityName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请选择行政区划",
                trigger: "blur",
              },
            ],
          },
          {
            label: "上级部门",
            prop: "parentId",
            span: 24,
            display: false,
            rules: [
              {
                required: false,
                message: "请选择上级部门",
                trigger: "blur",
              },
            ],
          },
          {
            label: "上级部门",
            prop: "parentName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: false,
                message: "请选择上级部门",
                trigger: "blur",
              },
            ],
          },
          {
            label: "部门名称",
            prop: "deptName",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入部门名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "部门简称",
            prop: "deptShort",
            search: true,
            rules: [
              {
                required: false,
                message: "请输入部门简称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "是否管理部门",
            prop: "orgType",
            span: 24,
            type: "radio",
            dicUrl: "/api/blade-system/dictitem/dictionary?type=yes_no",
            dataType: "number",
            labelWidth: 120,
            search: true,
            rules: [
              {
                required: true,
                message: "请选择呢是否管理部门",
                trigger: "click",
              },
            ],
          },
          {
            label: "社会信用代码",
            prop: "creditCode",
            span: 24,
            labelWidth: 120,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入统一社会信用代码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "组织机构代码",
            prop: "orgCode",
            search: true,
            span: 24,
            labelWidth: 120,
            rules: [
              {
                required: true,
                message: "请输入组织机构代码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "部门主体性质",
            prop: "deptType",
            type: "select",
            dicUrl: "/api/blade-system/dictitem/dictionary?type=dept_type",
            dataType: "number",
            labelWidth: 120,
            rules: [
              {
                required: true,
                message: "请选择部门主体性质",
                trigger: "blur",
              },
            ],
          },
          {
            label: "排序",
            prop: "sort",
            type: "number",
            rules: [
              {
                required: true,
                message: "请输入排序",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "remark",
            type: "textarea",
            minRows: 3,
            span: 24,
            rules: [
              {
                required: false,
                message: "请输入备注",
                trigger: "blur",
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.dept_add, false),
        viewBtn: this.vaildData(this.permission.dept_view, false),
        delBtn: this.vaildData(this.permission.dept_delete, false),
        editBtn: this.vaildData(this.permission.dept_edit, false),
      };
    },
  },
  methods: {
    initCityTree() {
      this.cityTreeData = [];
      getCityLazyTree(this.cityTopId).then((res) => {
        this.cityTreeData = res.data.data.map((item) => {
          return {
            ...item,
            leaf: !item.hasChildren,
          };
        });
      });
    },
    cityNodeClick(data) {
      const column = this.findObject(this.deptOption.column, "cityId");
      column.disabled = true;
      this.cityTreeId = data.id;

      getDeptTree(this.cityTreeId).then((res) => {
        this.treeData = res.data.data.map((item) => {
          return {
            ...item,
            leaf: !item.hasChildren,
          };
        });
      });

      // 回显行政区划和父级部门
      this.deptForm.cityId = data.id;
      this.deptForm.cityName = data.title;
      this.deptForm.parentId = 0;
      this.deptForm.parentName = "";
    },
    initTree() {
      this.treeData = [];
      this.treeId = 0;
      getDeptTree(this.cityTreeId).then((res) => {
        this.treeData = res.data.data.map((item) => {
          return {
            ...item,
            leaf: !item.hasChildren,
          };
        });
      });
    },
    nodeClick(data) {
      const column = this.findObject(this.deptOption.column, "parentId");
      column.disabled = true;

      this.treeId = data.id;
      getDept(this.treeId).then((res) => {
        this.deptForm = res.data.data;
        // 回显行政区划和父级部门
        // console.log(this.cityTreeData);
        // console.log(this.deptForm.cityId);
        // var city = this.cityTreeData.find(
        //   (item) => item.id == this.deptForm.cityId
        // );
        // this.deptForm.cityName = city.title;
      });
    },
    addChildren() {
      if (validatenull(this.deptForm.cityName)) {
        this.$message.warning("请先选择行政区划");
        return;
      }
      // if (validatenull(this.deptForm.parentName)) {
      //   this.$message.warning("请先选择上级部门");
      //   return;
      // }
      this.deptForm.parentId = this.deptForm.id;
      this.deptForm.parentName = this.deptForm.deptName;
      this.deptForm.deptName = "";
      this.deptForm.deptShort = "";
      // this.deptForm.deptType = 0;
      this.deptForm.creditCode = "";
      this.deptForm.orgCode = "";
      // this.deptForm.orgType = 0;
      this.deptForm.sort = this.deptForm.sort + 1;

      delete this.deptForm.id;
      delete this.deptForm.updateTime;
      delete this.deptForm.updateUser;
      delete this.deptForm.createTime;
      delete this.deptForm.createUser;
      delete this.deptForm.status;
      delete this.deptForm.isDeleted;
    },
    handleSubmit(form, done, loading) {
      delete form.cityName;
      delete form.parentName;
      delete form.$deptType;
      add(form).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.initTree();
          this.$refs.form.resetForm();
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    handleDelete() {
      if (validatenull(this.deptForm.deptName)) {
        this.$message.warning("请先选择一个部门");
        return;
      }
      this.$confirm(`确定将 [${this.deptForm.deptName}] 数据删除?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.treeId);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.initTree();
          this.$refs.form.resetForm();
        });
    },
  },
};
</script>

<style>
</style>
